<template>
  <div>
    <div class="coming" v-for="comingItem in comingLists" :key="comingItem.id">
      <p>{{comingItem.openTime}} {{comingItem.day}}</p>
      <ul>
        <li v-for="(item,index) in comingItem.movies" :key="index">
          <figure
            class="m-img ml fl pr"
            @click="playMovieVideo(item.preview[0] ? item.preview[0].iphoneUrl : 'http://cloud.video.taobao.com/play/u/1745440806/p/1/e/6/t/1/d/hd/45862110.mp4'
  , `https://gw.alicdn.com/${item.poster}`)"
          >
            <img :src="`https://gw.alicdn.com/${item.poster}`" />
            <div class="play-icon pa">
              <img src="https://gw.alicdn.com/tps/TB1PH2uLXXXXXaLaXXXXXXXXXXX-60-60.png" alt />
            </div>
          </figure>
          <div class="coming_right fr">
            <button>预售</button>
          </div>
          <router-link :to="{ name: 'detail', params: { id: item.mId }}">
            <div class="coming_cnt">
              <div class="coming_show">
                <h4>{{item.showName}}</h4>
                <span v-if="item.showMark">{{item.showMark}}</span>
              </div>
              <div class="coming_man">
                <span>{{item.wantCount}}人想看</span>
              </div>
              <p>导演：{{item.director}}</p>
              <p>主演：{{item.leadingRole}}</p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  props: {
    comingLists: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    ...mapMutations(["playVideo"]),
    playMovieVideo(url, cover) {
      this.playVideo({
        audio: {
          url: url,
          cover: cover
        }
      });
    }
  }
};
</script>

<style>
.coming > p {
  padding: 5px 15px;
  font-size: 14px;
}
.coming ul {
  padding-left: 15px;
  background-color: #fff;
}
.coming li {
  padding-top: 15px;
  border-bottom: 1px solid #d9d9d9;
}
.coming h4 {
  color: black;
}
.coming_right button {
  font-size: 12px;
  border: 1px solid #37b7ff;
  color: #37b7ff;
  border-radius: 3px;
  padding: 3px 8px;
  background-color: #fff;
  margin-top: 30px;
  margin-right: 15px;
  font-weight: 700;
}
.coming_cnt {
  margin-left: 75px;
  margin-right: 50px;
  padding-bottom: 20px;
}
.coming_show h4 {
  display: inline-block;
}
.coming_show span {
  border: 1px solid #adb6ca;
  color: #adb6ca;
  font-size: 12px;
  border-radius: 2px;
}
.coming_cnt p {
  margin-top: 6px;
  font-size: 14px;
  color: #8a869e;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.coming_man {
  font-size: 14px;
  color: #fea54c;
  margin-top: 8px;
}
.m-img {
  width: 65px;
  height: 90px;
}
.play-icon {
  width: 17px;
  height: 17px;
  left: 50%;
  top: 50%;
  margin-left: -8.5px;
  margin-top: -8.5px;
  opacity: 0.7;
}
.m-img img,
.play-icon img {
  width: 100%;
  height: 100%;
}
</style>
